<template>
	<div id="singer-songs" v-if="loadState">
		<!--歌手信息-->
		<div class="singer-info">
			<div class="singer-img">
				<img :src="`https://y.gtimg.cn/music/photo_new/T001R150x150M000${singerImg}.jpg?max_age=2592000`" />
			</div>
			<p class="singer-name">{{singerName}}</p>
		</div>
		<!--总计-->
		<div class="song-total">
			<p>
				<span></span><span>歌单  共 {{songTotal}} 首</span>
			</p>
		</div>
		<!--该歌手的歌单列表-->
		<ul>
			<li v-for="(item,index) in songList" @click="play(index)" :class="index==playIndex&&playState=='playing'?'pos-shadow':''">
				<p class="songName textOverflow">
					<span>{{index+1}}. </span><span>{{item.musicData.songname}}</span>
				</p>
				<p class="songDesc textOverflow">
					<span>《{{item.musicData.albumname}}》</span>
					<span>{{item.musicData.albumdesc}}</span>
				</p>
				<!--音乐跳动符动画-->
				<div class="music-jump" v-show="index==playIndex&&playState=='playing'?true:false">
					<div class="box">
						<div class="pillar"></div>
					</div>
					<div class="box">
						<div class="pillar"></div>
					</div>
					<div class="box">
						<div class="pillar"></div>
					</div>
				</div>
			</li>
		</ul>
		<!--底部logo落款-->
		<div class="footer">
			<img src="//y.gtimg.cn/mediastyle/mod/mobile/img/logo.svg?max_age=2592000" />
			<p>QQ音乐</p>
		</div>
	</div>
	<!--loading-->
	<div class="loading" v-else>
		<mt-spinner type="fading-circle" color="#282828" :size="66"></mt-spinner>
	</div>
</template>

<script>
	import api from '../js/musicAPI.js';

	export default {
		data: function() {
			return {
				songMid: [], //歌曲的播放id
				songList: "", //歌曲列表
				songTotal: "", //歌曲总数
				singerImg: "", //歌手图片
				singerName: "", //歌手名字
				playState: "", //当前的播放状态
				playIndex: "", //当前播放的下标
				player: {}, //播放器对象
				loadState: false, //加载的状态
			}
		},
		created: function() {
			let that = this;
			let id = this.$route.query.mid;
			//请求歌手歌单列表
			api.getSingerSongs(id).then((res) => {
				that.singerImg = res.data.singer_mid;
				that.singerName = res.data.singer_name;
				that.songList = res.data.list;
				that.songTotal = res.data.list.length;
				that.loadState = true;
				//把所有的歌曲播放id存起来，方便调用
				that.songMid = res.data.list.map(function(item, index) {
					return item.musicData.songmid;
				});
			});
			//初始化播放组件
			this.player = new QMplayer();
			//播放的回调
			this.player.on("play", function() {
				console.log("play");
				that.playState = this.data.state;
				that.playIndex = this.data.index;
			});
			//暂停的回调
			this.player.on("pause", function() {
				console.log("pause");
				that.playState = this.data.state;
			});
			//播放错误的回调
			this.player.on("error", function(e) {
				this.pause();
			});
		},
		methods: {
			play: function(index) {
				this.player.play(this.songMid, {
					index: index
				})
			}
		},
		beforeDestroy: function() {
			this.player.pause();
		}
	}
</script>

<style lang="scss" scoped>
	@import "../scss/singer_songs";
</style>